<template>
    <div class="teamplate-charts">
        <div class="container-fluid">


            <div class="row h-query">
                <!-- <form class="form-inline"> -->
                <!-- <form> -->
                    <div class="control-group form-group">
                        <label class="control-label">开始日期</label>
                        <div class="controls input-append date " style="display:inline-block;" data-date="" >
                            <input size="16" type="text" class="startDate form-control form_date" data-date-format="yyyy-mm-dd" data-link-format="yyyy-mm-dd">
                        </div>
                        <label class="control-label">终止日期</label>
                        <div class="controls input-append date " style="display:inline-block;" data-date="" >
                            <input size="16" type="text" v-model.lazy="endDate"  class="stopDate form-control form_date " data-date-format="yyyy-mm-dd" data-link-format="yyyy-mm-dd">
                        </div>
                        <label class="control-label">
                            <div class="controls input-append" style="display:inline-block;">
                                <input type="radio" name="chartType">
                            </div>     
                            直方图
                        </label>
                        <label class="control-label">
                            <div class="controls input-append" style="display:inline-block;">
                                <input type="radio" name="chartType">
                            </div>
                            饼图
                        </label>
                        <label class="control-label">
                            <div class="controls input-append" style="display:inline-block;">
                                <input type="radio" name="chartType">
                            </div>
                            曲线图
                        </label>
                        
                    </div>
                    <div class="control-group form-group">
                        <label class="control-label">部门</label>
                        <div class="controls input-append" style="display:inline-block;">
                            <select class="form-control" v-model="bm">
                                <option v-for="item in bmList" :value="item.bm">{{item.bm}}</option>
                            </select>
                        </div>
                        <label class="control-label">收款员</label>
                        <div class="controls input-append" style="display:inline-block;">
                            <select class="form-control" v-model="shky">
                                <option v-for="item in shkyList" :value="item.shky">{{item.shky}}</option>
                            </select>
                        </div>
                        <label class="control-label">销售员</label>
                        <div class="controls input-append" style="display:inline-block;">
                            <select class="form-control" v-model="xshy">
                                <option v-for="item in xshyList" :value="item.xshy">{{item.xshy}}</option>
                            </select>
                        </div>
                        <label class="control-label">收款台</label>
                        <div class="controls input-append date " style="display:inline-block;">
                            <input size="16" type="text" v-model="sktid"  class="form-control">
                        </div>
                        <button type="submit" class="btn btn-default" @click="query">查询</button>                        
                    </div>
                    <div class="control-group form-group">

                        <ul class="nav nav-tabs nav-justified">
                            <li class="active"><a href="#today" data-toggle="tab">当日销售时段</a></li>
                            <li><a href="#yesterday" data-toggle="tab">往日销售时段</a></li>
                        </ul>

                    </div>
                <!-- </form> -->


            </div>



            <div class="row h-query" style="overflow: hidden; margin-top: -5px; height: 100%;">

                <div class="clearfix line-wrap tab-pane">
                    <div class="tab-content">

                        <div class="tab-pane fade in active" id="today">
                            <div id="chart_main" style="height: 500px;"></div>
                        </div>

                        <div class="tab-pane fade" id="yesterday">
                            <p>iOS 是一个由苹果公司开发和发布的手机操作系统。最初是于 2007 年首次发布 iPhone、iPod Touch 和 Apple 
                                TV。iOS 派生自 OS X，它们共享 Darwin 基础。OS X 操作系统是用在苹果电脑上，iOS 是苹果的移动版本。</p>
                        </div>

                    </div> 
                </div>

            </div>


        </div>
    </div>
</template>

<script>


    export default {
        data() {
            return {
                sktid: '', // 收款台ID
                fdbs: '', // 分店标识
                bmList: [{
                   bm: '总部' 
                }], // 部门列表
                shkyList: [], // 收款员列表
                xshyList: [], // 销售员列表
                bm: '', // 部门
                shky: '', // 收款员
                xshy: '', // 销售员
                sktid: '', // 收款台ID
                startDate: '', // 开始时间
                endDate: '', // 结束时间
                today: '', // 当日 tab
                former: '', // 往日 tab
                fdbs: localStorage.getItem('fdbs')
            }
        },

        // computed:
        methods: {
            /**
             * 点击查询
             * @return {[type]}
             */
            query() {
                console.log(this.$data.chart);
                this.getData({
                    fdbs: '',
                    bm:'',
                    shky:'',
                    xshy:'',
                    sktid:''
                });
            },

            redraw(data) {
                var option = this.$data.chart.getOption();
                option.series[0].data = data;
                this.$data.chart.setOption(option);
            },
            /**
             * 获取数据
             * @return {[type]}
             */
            getData(params) {
                var me = this;
                this.$http.get(this.cfg.api + "/frontMonitor/selectSPDRLSSDFX", params).then(function(res) {
                    console.log(res.body.data.ssje);
                    me.redraw(res.body.data.ssje);
                }, function(res) {
                    console.log(res.body);
                })
            }
        },

        created() {
            let me = this;
            me.$data.sktid = localStorage.getItem("sktId");
            me.service.indexLsNew(me, {
                pageName: 'MXLS_SHOW',
                sktid: me.$data.sktid
            }, function(res) {
                // this.$data.bms = res.data.hwList;
                // this.$data.shkys = res.data.xsyList;
                me.$data.xshyList = res.data.xsyList;

            });
        },

        mounted() {
            var me = this;
            /**
             * [language description]
             * @type {String}
             */
            $(".startDate, .stopDate").datetimepicker({
                language: "zh-CN",
                weekStart: 1,
                todayBtn: 1,
                autoclose: 1,
                todayHighlight: 1,
                startView: 2,
                minView: 2,
                forceParse: 0,
                format: "yyyy-mm-dd"
            }).on('changeDate', function(ev){
                var target = $(ev.target);
                if (target.hasClass('startDate')) {
                    me.$data.startDate = target.val();
                } else {
                    me.$data.endDate = target.val();
                }
            });



            var option = {
                tooltip : {
                    trigger: 'axis'
                },
                toolbox: {
                    show : true,
                    feature : {
                        myTool1: {
                            show: true,
                            title: '切换为饼图',
                            icon: 'image://http://echarts.baidu.com/images/favicon.png',
                            onclick: function (){
                                alert('myToolHandler1')
                            }
                        },
                        magicType : {show: true, type: ['line', 'bar']},
                        restore : {show: true},
                        saveAsImage : {show: true}

                    }
                },
                calculable : true,
                xAxis : [
                    {
                        type : 'category',
                        data : ["1时段", "2时段", "3时段", "4时段", "5时段", "6时段", "7时段", "8时段", "9时段", "10时段", "11时段", "12时段", "13时段", "14时段", "15时段", "16时段", "17时段", "18时段", "19时段", "20时段", "21时段", "22时段", "23时段", "24时段"]
                    }
                ],
                yAxis : [
                    {
                        type : 'value'
                    }
                ],
                series : [
                    {
                        type:'bar',
                        data:["0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "4.30000", "12.90000", "0", "33.10000", "34.80000", "124.90000", "95.72000", "0", "0", "0", "0", "0", "0", "0"],
                        label: {
                            normal: {
                                show: true,
                                position: 'insideTop'
                            }
                        }
                    }
                ]
            };


            var myChart = echarts.init(document.getElementById('chart_main'));

            myChart.setOption(option);

            console.log(myChart);

            this.$data.chart = myChart;


        }
    }
</script>